'use client';

import React from 'react';
import { Card, Tag } from 'antd';
import type { Dayjs } from 'dayjs';
import { InstrumentScheduleSpecificDate, InstrumentScheduleTimeslot, DateType } from '@/types/instrument';
import { ScheduleType } from '@/types/system';

// 日期状态接口
interface DayStatus {
  date: string;
  scheduleType: ScheduleType; // 1=节假日 2=调休日 3=正常周末
  isWorkday: boolean; // 是否为工作日
}

interface CardViewProps {
  weekDates: Array<{ date: string; dayName: string; dayNumber: number; dayObj: Dayjs }>;
  dayStatusMap: Map<string, DayStatus>;
  selectedDate: string;
  setSelectedDate: (date: string) => void;
  getSpecificDateConfig: (date: string) => InstrumentScheduleSpecificDate | undefined;
  generateDefaultTimeslots: (date: string) => InstrumentScheduleTimeslot[];
  readOnly: boolean;
}

const CardView: React.FC<CardViewProps> = ({
  weekDates,
  dayStatusMap,
  selectedDate,
  setSelectedDate,
  getSpecificDateConfig,
  generateDefaultTimeslots,
  readOnly
}) => {
  return (
    <>
      {/* 日期选择网格 */}
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(7, 1fr)', gap: 8, marginBottom: 16 }}>
        {weekDates.map((dateInfo) => {
          const dayStatus = dayStatusMap.get(dateInfo.date);
          const isSelected = selectedDate === dateInfo.date;

          // 获取日期状态标签
          const getStatusTag = () => {
            if (!dayStatus) return null;
            
            const statusMap = {
              [ScheduleType.HOLIDAY]: { text: '节假日', color: 'red' },
              [ScheduleType.WORKDAY]: { text: '工作日', color: 'blue' },
              [ScheduleType.WEEKEND]: { text: '周末', color: 'purple' }
            };
            
            const status = statusMap[dayStatus.scheduleType as keyof typeof statusMap];
            return status ? <Tag color={status.color}>{status.text}</Tag> : null;
          };
          
          return (
            <Card
              key={dateInfo.date}
              size="small"
              style={{
                textAlign: 'center',
                cursor: readOnly ? 'default' : 'pointer',
                backgroundColor: (() => {
                  // 选中状态优先级最高
                  if (isSelected) {
                    return '#e6f7ff';
                  }
                  
                  const specificConfigForCard = getSpecificDateConfig(dateInfo.date);
                  const defaultTimeslotsForCard = generateDefaultTimeslots(dateInfo.date);
                  
                  if (specificConfigForCard) {
                    return specificConfigForCard.dateType === DateType.CUSTOM_TIME_SLOTS ? '#f6ffed' : '#fff2e8';
                  } else if (defaultTimeslotsForCard.length > 0) {
                    return '#f6ffed';
                  } else {
                    return '#fafafa';
                  }
                })(),
                borderColor: (() => {
                  // 选中状态优先级最高
                  if (isSelected) {
                    return '#1890ff';
                  }
                  
                  const specificConfigForCard = getSpecificDateConfig(dateInfo.date);
                  const defaultTimeslotsForCard = generateDefaultTimeslots(dateInfo.date);
                  
                  if (specificConfigForCard) {
                    return specificConfigForCard.dateType === DateType.CUSTOM_TIME_SLOTS ? '#b7eb8f' : '#ffbb96';
                  } else if (defaultTimeslotsForCard.length > 0) {
                    return '#b7eb8f';
                  } else {
                    return '#d9d9d9';
                  }
                })(),
                borderWidth: isSelected ? 2 : 1
              }}
              onClick={() => !readOnly && setSelectedDate(dateInfo.date)}
            >
              <div style={{ marginBottom: 4, position: 'relative' }}>
                {isSelected && (
                  <div style={{
                    position: 'absolute',
                    top: -2,
                    right: -2,
                    width: 8,
                    height: 8,
                    backgroundColor: '#1890ff',
                    borderRadius: '50%',
                    border: '1px solid white'
                  }} />
                )}
                <div>{dateInfo.dayName}</div>
                <div style={{ fontSize: 16, fontWeight: 'bold' }}>{dateInfo.dayNumber}</div>
              </div>
              
              {getStatusTag()}
              
              <div style={{ fontSize: 12, color: '#666', marginTop: 4 }}>
                {(() => {
                  const specificConfigForDate = getSpecificDateConfig(dateInfo.date);
                  const defaultTimeslotsForDate = generateDefaultTimeslots(dateInfo.date);
                  
                  if (specificConfigForDate) {
                    if (specificConfigForDate.dateType === DateType.CLOSE_ALL_DAY) {
                      return <div><div>特定配置</div><div>关闭整天</div></div>;
                    } else {
                      return <div><div>特定配置</div><div>{specificConfigForDate.timeslots.length}个时间段</div></div>;
                    }
                  } else if (defaultTimeslotsForDate.length > 0) {
                    return <div><div>默认配置</div><div>{defaultTimeslotsForDate.length}个时间段</div></div>;
                  } else {
                    return '无配置';
                  }
                })()}
              </div>
            </Card>
          );
        })}
      </div>
    </>
  );
};

export default CardView; 